<template>
  <div class="html1_9">
    <h1>1.9 HTML5的状态交互标签</h1>
      <div class="html1_9_1">
        <h2>1.9.1 meter标签</h2>
        <p>
          <pre>
            定义和用法
&lt;meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
&lt;meter>定义预定义范围内的度量，状态标签(实时状态显示:气压、气温)C、O
例子：磁盘用量、查询结果的相关性，等等。
注释：&lt;meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 &lt;progress> 标签
&lt;meter>有以下属性
          </pre>
        </p>
        <p class="tab">表2-9  meter标签常用的属性和取值</p>
        <table border="1px">
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>描述</th>
          </tr>
          <tr>
            <td>form</td>
            <td>form_id</td>
            <td>规定 &lt;meter> 元素所属的一个或多个表单。</td>
          </tr>
          <tr>
            <td>high</td>
            <td>number</td>
            <td>规定被视作高的值的范围。</td>
          </tr>
          <tr>
            <td>low</td>
            <td>number</td>
            <td>规定被视作低的值的范围。</td>
          </tr>
          <tr>
            <td>max</td>
            <td>number</td>
            <td>规定范围的最大值。</td>
          </tr>
          <tr>
            <td>min</td>
            <td>number</td>
            <td>规定范围的最小值。</td>
          </tr>
          <tr>
            <td>optimum</td>
            <td>number</td>
            <td>规定度量的优化值。</td>
          </tr>
          <tr>
            <td>value</td>
            <td>number</td>
            <td>必需。规定度量的当前值。</td>
          </tr>
        </table>
        <p>
          <pre>
            实例：
&lt;p>显示度量值：&lt;/p>
	&lt;meter value="3" min="0" max="10">3/10&lt;/meter>&lt;br>
	&lt;meter value="0.6">60%&lt;/meter>
          </pre>
        </p>
        <img src="../assets/images/2.40.png" alt="">
        <p>图2.9.1  meter标签实例</p>
      </div>
      <div class="html1_9_2">
        <h2>1.9.2 progress标签</h2>
        <p>
          <pre>
            定义和用法
&lt;progress> 标签标示任务的进度（进程）。
&lt;progress>状态标签 (任务过程:安装、加载) C、F、O
提示：请结合 &lt;progress> 标签与 JavaScript 一同使用，来显示任务的进度。
注释：&lt;progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 &lt;meter> 标签代替。
          </pre>
        </p>
        <p class="tab">表2-9  progress标签常用的属性和取值</p>
        <table border="1px">
        <tr>
          <th>属性</th>
          <th>值</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>max</td>
          <td>number</td>
          <td>规定任务一共需要多少工作。</td>
        </tr>
        <tr>
          <td>value</td>
          <td>number</td>
          <td>规定已经完成多少任务。</td>
        </tr>
      </table>
      <p>
        <pre>
          实例：
&lt;p>下载进度：&lt;/p>
	&lt;progress value="22" max="100">&lt;/progress>&lt;p>22%&lt;/p>&lt;br />
	&lt;progress value="66" max="100">&lt;/progress>&lt;p>66%&lt;/p>
        </pre>
      </p>
      <img src="../assets/images/2.41.png" alt="">
        <p>图2.9.2  progress标签实例</p>
      </div>
      <div class="html1_9_3">
        <h2>1.9.3 mark标签</h2>
        <p>
          <pre>
            定义和用法
&lt;mark> 标记定义有标记的文本 (黄色选中状态)
实例：
&lt;p>习近平视察&lt;mark>武警第二机动总队&lt;/mark>时讲话引强烈反响&lt;/p>
          </pre>
        </p>
        <img src="../assets/images/2.42.png" alt="">
        <p>图2.9.3  mark标签实例</p>
      </div>  
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>